<template>
  <div style="height: 100%; display: flex; flex-direction: column">
    <div style="display: flex; flex: 0 0 48px">
      <div style="flex: 1 1 240px; padding: 8px; color: #ffe">
        QueryType:

        <a-radio-group v-model:value="queryType" button-style="solid">
          <a-radio-button value="DB">DB Search</a-radio-button>
          <a-radio-button value="LUCENE">LUCENE Search</a-radio-button>
        </a-radio-group>

        <a-tooltip>
          <template #title>分词间的查询逻辑关系</template>
          <a-switch
            style="margin-left: 8px"
            v-model:checked="logicSplitWord"
            v-if="queryType == 'LUCENE'"
            checked-children="AND"
            un-checked-children="OR"
          />
        </a-tooltip>
      </div>
      <div style="flex: 0 0 900px; padding: 8px">
        Classify：
        <a-select
          ref="select"
          v-model:value="classify"
          style="width: 120px"
          placeholder="Classify"
          :options="classifyList"
          :allowClear="true"
        ></a-select>

        Tag：<a-select
          v-model:value="searchTag"
          show-search
          placeholder="Tag"
          :allowClear="true"
          style="width: 120px"
          :default-active-first-option="false"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
          :options="tagOption"
          @search="handleTagSearch"
          @change="handleTagChange"
        ></a-select>
        KeyWords：<a-input-search
          v-model:value="kw"
          allowClear
          style="width: 300px"
          placeholder="input search text"
          @search="queryArticleList"
          enter-button
        />
      </div>
    </div>

    <div style="flex: 1 1 auto">
      <div style="padding-left: 64px; padding-bottom: 32px">
        <div
          v-for="item in list"
          :key="item.id"
          style="
            border-left: 8px solid #91caff;
            display: flex;
            background: #e6f4ff;
            margin: 16px;
            padding: 16px;
          "
        >
          <div style="flex: 1 1 auto">
            <ArticleView :articleId="item.id"
              ><a-tag color="#108ee9">{{ item.classify }}</a-tag>
              <b style="color: rgb(16, 142, 233)">{{
                item.title
              }}</b></ArticleView
            >
          </div>
          <div style="flex: 0 0 400px; text-align: right">
            <a-tag v-for="tag in item.tagsList" :key="tag" color="orange">{{
              tag
            }}</a-tag>

            <Article :articleId="item.id">
              <a-tooltip>
                <template #title>Edit</template>
                <a-button type="primary" size="small">
                  <template #icon>
                    <EditOutlined />
                  </template>
                </a-button>
              </a-tooltip>
            </Article>

            <a-tooltip>
              <template #title>Index This Article</template>
              <a-button
                type="primary"
                size="small"
                @click="indexArticleById(item.id)"
                style="margin-left: 8px"
              >
                <template #icon>
                  <NodeIndexOutlined />
                </template>
              </a-button>
            </a-tooltip>

           
              <a-popconfirm
                title="Are you sure delete this article?"
                ok-text="Yes"
                cancel-text="No"
                @confirm="deleteArticleById(item.id)"
              >
                <a-button type="primary" size="small" style="margin-left: 8px">
                  <template #icon>
                    <DeleteOutlined />
                  </template>
                </a-button>
              </a-popconfirm>
           
          </div>
        </div>

        <a-button block @click="loadPageData" :disabled="currentMax >= total">
          <div style="display: flex">
            <div style="flex: 1 1 auto">
              <a-progress
                :percent="(currentMax / total) * 100"
                size="small"
                :showInfo="false"
              />
            </div>
            <div style="flex: 0 0 80px">{{ currentMax }}/{{ total }}</div>
            <div style="flex: 0 0 80px">
              <template v-if="currentMax >= total"> 已全部加载 </template>
              <template v-else> 加载更多 </template>
            </div>
          </div>
        </a-button>

        <!-- <a-button block type="primary" @click="loadPageData" >
          Load More
        </a-button> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import KcHooks from "@/hooks/KcHooks.js";
import { ref, reactive, toRaw, onMounted } from "vue";
import {
  BookOutlined,
  EditOutlined,
  NodeIndexOutlined,
  DeleteOutlined,
} from "@ant-design/icons-vue";
import ArticleView from "@/views/ArticleView.vue";
import Article from "@/views/Article.vue";
import { messageApi, contextHolder } from "@/utils/MessageUtils.js";
const kw = ref("");
const list = ref([]);
const searchTag = ref("");
const classify = ref("");
const logicSplitWord = ref(false);
const queryType = ref("LUCENE");
async function queryArticleList() {
  currentPage.value = 0;
  const totalRes = await KcHooks.queryArticleListTotal({
    classify: classify.value,
    searchTags: searchTag.value,
    kw: kw.value,
    currentPage: currentPage.value,
    queryType: queryType.value,
  });
  total.value = totalRes.result;
  const res = await KcHooks.queryArticleList({
    classify: classify.value,
    searchTags: searchTag.value,
    kw: kw.value,
    logicalSplitWord: logicSplitWord.value,
    currentPage: currentPage.value,
    queryType: queryType.value,
  });
  list.value = res.result;
  currentMax.value = res.result.length;
}

async function loadPageData() {
  currentPage.value = currentPage.value + 1;
  const res = await KcHooks.queryArticleList({
    classify: classify.value,
    searchTags: searchTag.value,
    kw: kw.value,
    logicalSplitWord: logicSplitWord.value,
    currentPage: currentPage.value,
    queryType: queryType.value,
  });
  list.value = [...list.value, ...res.result];
  currentMax.value = currentMax.value + res.result.length;
}

const total = ref(0);
const currentMax = ref(0);
const currentPage = ref(0);

const tagOption = ref([]);
async function handleTagChange(v) {
  console.log(v);
}

async function handleTagSearch(v) {
  console.log(v);

  const res = await KcHooks.queryArticleTags(v);
  console.log("res:", res);
  tagOption.value = res.result.map((item) => {
    return { value: item.value, label: item.value };
  });
}

const classifyList = ref([]);

onMounted(async () => {
  const dicts = await KcHooks.queryDict("ARTICLE_CLASSIFY");
  classifyList.value = dicts.result;
});

async function indexArticleById(id) {
  const res = await KcHooks.indexArticleById(id);
  messageApi.success("Article Index Complete");
}

async function deleteArticleById(id) {
  const res = await KcHooks.deleteArticle(id);
  messageApi.success("Article Delete Complete");
  queryArticleList();
}
</script>

<style>
</style>
